<!DOCTYPE html>
<html lang="zh">
    <head>
    <!-- 
        © Material Theme
        https://github.com/viosey/hexo-theme-material
        Version: 1.3.0 -->

    <!-- Title -->
    
    <title>
        
            茶叶项目部分重构 | 
        
        Star~
    </title>

    <!-- Favicons -->
    <link rel="icon shortcut" type="image/ico" href="/img/favicon.png">
    <link rel="icon" sizes="192x192" href="/img/favicon.png">
    <link rel="apple-touch-icon" href="/img/favicon.png">

    <!-- Meta & Info -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#0097A7">
    <meta name="author" content="Star">
    <meta name="description" content="Live your dream, and wear your passion.">
    <meta name="keywords" content="null,总结">

    <!--iOS -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-title" content="Title">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="480">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Star~">

    <!-- The Open Graph protocol -->
    <meta property="og:url" content="https://jessty.github.io">
    <meta property="og:type" content="blog">
    <meta property="og:title" content="茶叶项目部分重构 | Star~">
    <meta property="og:description" content="Live your dream, and wear your passion.">
    <meta property="og:article:tag" content="总结"> 

    <!--[if lte IE 9]>
        <link rel="stylesheet" href="/css/ie-blocker.css">

        
            <script src="/js/ie-blocker.zhCN.js"></script>
        
    <![endif]-->

    <!-- Import CSS -->
    <link rel="stylesheet" href="/css/material.min.css">
    <link rel="stylesheet" href="/css/style.min.css">
    <!-- Config CSS -->


<!-- Other Styles -->
<style>
  body, html {
    font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  a {
    color: #00838F;
  }

  .mdl-card__media,
  #search-label,
  #search-form-label:after,
  #scheme-Paradox .hot_tags-count,
  #scheme-Paradox .sidebar_archives-count,
  #scheme-Paradox .sidebar-colored .sidebar-header,
  #scheme-Paradox .sidebar-colored .sidebar-badge{
    background-color: #0097A7 !important;
  }

  /* Sidebar User Drop Down Menu Text Color */
  #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:hover,
  #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:focus {
    color: #0097A7 !important;
  }

  #post_entry-right-info,
  .sidebar-colored .sidebar-nav li:hover > a,
  .sidebar-colored .sidebar-nav li:hover > a i,
  .sidebar-colored .sidebar-nav li > a:hover,
  .sidebar-colored .sidebar-nav li > a:hover i,
  .sidebar-colored .sidebar-nav li > a:focus i,
  .sidebar-colored .sidebar-nav > .open > a,
  .sidebar-colored .sidebar-nav > .open > a:hover,
  .sidebar-colored .sidebar-nav > .open > a:focus,
  #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {
    color: #0097A7 !important;
  }

  .toTop {
    background: #757575 !important;
  }

  .material-layout .material-post>.material-nav,
  .material-layout .material-index>.material-nav,
  .material-nav a {
    color: #757575;
  }

  #scheme-Paradox .MD-burger-layer {
    background-color: #757575;
  }

  #scheme-Paradox #post-toc-trigger-btn {
    color: #757575;
  }

  .post-toc a:hover {
    color: #00838F;
    text-decoration: underline;
  }
</style>


<!-- Theme Background Related-->

    <style>
      body{
        background-image: url(/img/bg.png);
      }
    </style>




<!-- Fade Effect -->

    <style>
      .fade {
        transition: all 800ms linear;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
      }

      .fade.out{
        opacity: 0;
      }
    </style>



    <script src="/js/jquery.min.js"></script>
    <script src="/js/queue.js"></script>

    <!-- UC Browser Compatible -->
    <script>
        var agent = navigator.userAgent.toLowerCase();
        if(agent.indexOf('ucbrowser')>0) {
            document.write("<link rel=\"stylesheet\" href=\"/css/uc.css\">");
            alert('由于 UC 浏览器使用极旧的内核，而本网站使用了一些新的特性。\n为了您能更好的浏览，推荐使用 Chrome 或 Firefox 浏览器。');
        }
    </script>

    

    

    <!-- Bing Background -->
    

    <!-- Custom Head -->
    
</head>


    
        <body id="scheme-Paradox" class="lazy">
            <div class="material-layout  mdl-js-layout has-drawer is-upgraded">
                

                <!-- Main Container -->
                <main class="material-layout__content" id="main">

                    <!-- Top Anchor -->
                    <div id="top"></div>

                    
                        <!-- Hamburger Button -->
                        <button class="MD-burger-icon sidebar-toggle">
                            <span class="MD-burger-layer"></span>
                        </button>
                    

                    <!-- Post TOC -->

    
    <!-- Back Button -->
    <!--
    <div class="material-back" id="backhome-div" tabindex="0">
        <a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
           href="#" onclick="window.history.back();return false;"
           target="_self"
           role="button"
           data-upgraded=",MaterialButton,MaterialRipple">
            <i class="material-icons" role="presentation">arrow_back</i>
            <span class="mdl-button__ripple-container">
                <span class="mdl-ripple"></span>
            </span>
        </a>
    </div>
    -->

    <!-- Left aligned menu below button -->
    <button id="post-toc-trigger-btn"
        class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">format_list_numbered</i>
    </button>

    <ul class="post-toc-wrap mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="post-toc-trigger-btn">
        <ol class="post-toc"><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#Introduction"><span class="post-toc-number">1.</span> <span class="post-toc-text">Introduction</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#Idea"><span class="post-toc-number">2.</span> <span class="post-toc-text">Idea</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#Analysis"><span class="post-toc-number">3.</span> <span class="post-toc-text">Analysis</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#抽离出组件"><span class="post-toc-number">3.1.</span> <span class="post-toc-text">抽离出组件</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#分析各个组件担当的角色"><span class="post-toc-number">3.2.</span> <span class="post-toc-text">分析各个组件担当的角色</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#确定组件的对外接口或核心部分"><span class="post-toc-number">3.3.</span> <span class="post-toc-text">确定组件的对外接口或核心部分</span></a></li></ol></li></ol>

        <!--
        <li class="mdl-menu__item">
            Some Action
        </li>
        -->
    </ul>




<!-- Layouts -->

    <!-- Post Module -->
    <div class="material-post_container">

        <div class="material-post mdl-grid">
            <div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">

                <!-- Post Header(Thumbnail & Title) -->
                
    <!-- Paradox Post Header -->
    
        
            <!-- Random Thumbnail -->
            <div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50">
            <script>
    var randomNum = Math.floor(Math.random() * 22 + 1);

    $('.post_thumbnail-random').css('background-image', 'url(' + '/img/random/material-' + randomNum + '.png' + ')');
</script>

        
    
            <p class="article-headline-p">
                茶叶项目部分重构
            </p>
        </div>





                
                    <!-- Paradox Post Info -->
                    <div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">

    <!-- Author Avatar -->
    <div id="author-avatar">
        <img src="/img/avatar.png" width="44px" height="44px" alt="Author Avatar"/>
    </div>
    <!-- Author Name & Date -->
    <div>
        <strong>Star</strong>
        <span>8月 02, 2017</span>
    </div>

    <div class="section-spacer"></div>

    <!-- Favorite -->
    <!--
        <button id="article-functions-like-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon btn-like">
            <i class="material-icons" role="presentation">favorite</i>
            <span class="visuallyhidden">favorites</span>
        </button>
    -->

    <!-- Qrcode -->
    

    <!-- Tags (bookmark) -->
    
    <button id="article-functions-viewtags-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
        <i class="material-icons" role="presentation">bookmark</i>
        <span class="visuallyhidden">bookmark</span>
    </button>
    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-viewtags-button">
        <li class="mdl-menu__item">
        <a class="post_tag-link" href="/tags/总结/">总结</a>
    </ul>
    

    <!-- Share -->
    <button id="article-fuctions-share-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
    <i class="material-icons" role="presentation">share</i>
    <span class="visuallyhidden">share</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-fuctions-share-button">
    

    

    <!-- Share Weibo -->
    
        <a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=茶叶项目部分重构&url=https://jessty.github.io//2017/08/02/teaRefactor/index.html&pic=&searchPic=false&style=simple" target="_blank">
            <li class="mdl-menu__item">
                分享到微博
            </li>
        </a>
    

    <!-- Share Twitter -->
    

    <!-- Share Facebook -->
    
        <a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=https://jessty.github.io//2017/08/02/teaRefactor/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Facebook
            </li>
        </a>
    

    <!-- Share Google+ -->
    
        <a class="post_share-link" href="https://plus.google.com/share?url=https://jessty.github.io//2017/08/02/teaRefactor/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Google+
            </li>
        </a>
    

    <!-- Share LinkedIn -->
    

    <!-- Share QQ -->
    
        <a class="post_share-link" href="http://connect.qq.com/widget/shareqq/index.html?site=Star~&title=茶叶项目部分重构&summary=Live your dream, and wear your passion.&pics=https://jessty.github.io/img/favicon.png&url=https://jessty.github.io/2017/08/02/teaRefactor/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 QQ
            </li>
        </a>
    

    <!-- Share Telegram -->
    
</ul>

</div>

                

                <!-- Post Content -->
                <div id="post-content" class="mdl-color-text--grey-700 mdl-card__supporting-text fade out">
    
        <h1 id="Introduction"><a href="#Introduction" class="headerlink" title="Introduction"></a>Introduction</h1><p>&emsp;&emsp;茶叶项目是今年上半年做的，主要是做一个关于茶叶的安全溯源系统，涵盖茶叶的种植、采收、加工、物流和销售这五大方面，系统负责汇集并管理这五个阶段产生的信息，从而进一步实现对茶叶质量与安全的监控和追踪。而我主要参与加工和销售模块的前端实现。</p>
<p>&emsp;&emsp;前端技术栈主要是：<code>vue + vue-router + axios + element-ui</code><br>&emsp;&emsp;其实，对于我们前端小组来说，我们大多数人包括我，在刚接到项目的时候对vue框架都不是十分熟悉，这导致我们在用vue去做时，遇到许多的坑，也没有充分利用组件化的思维去实现，导致组员做了很多重复的东西。我做到后期对vue有了进一步的了解，于是想重新从零开始重构一下我负责的模块，但是由于后期项目基本定型，而我的重构会造成大面积的改动，所以我只能自娱自乐了呗，技术还是要融合一下滴！</p>
<h1 id="Idea"><a href="#Idea" class="headerlink" title="Idea"></a>Idea</h1><p>大部分界面基本如下：<br><img src="http://ou1hsqn5g.bkt.clouddn.com/2017080204.PNG?imageMogr2/thumbnail/!90p" alt="Idea图"></p>
<p>我的想法：</p>
<ul>
<li>利用动态路由和嵌套路由匹配，实现组件的层层拼接，形成完整的页面。</li>
<li>对于各个页面（主要是表格区）的所特有的信息的展示，比如表头字段、操作对应的后台接口url，则通过定义一个个<code>类似配置文件的js文件</code>，在路由匹配时，通过vue的路由钩子读取相应配置文件的信息，并prop传递给子组件，从而实现组件模板的重用。</li>
<li>其实路由的路径结构与嵌套对象的结构很像（从vue-router的嵌套路由受到的启发），可以直接<code>利用路由路径的结构去设计配置文件</code>里的js嵌套对象，什么样的路径，就读取配置文件的哪部分js对象，达到统一的结构。</li>
</ul>
<p>流程图如下：<br><img src="http://ou1hsqn5g.bkt.clouddn.com/2017080203.PNG?imageMogr2/thumbnail/!70p" alt="Idea图"></p>
<h1 id="Analysis"><a href="#Analysis" class="headerlink" title="Analysis"></a>Analysis</h1><h2 id="抽离出组件"><a href="#抽离出组件" class="headerlink" title="抽离出组件"></a>抽离出组件</h2><p>每个界面基本可以抽离出<code>header</code>、侧边的<code>nav</code>和中间的<code>tabs</code>组件以及tabs里的<code>table</code>子组件，如下：<br><img src="http://ou1hsqn5g.bkt.clouddn.com/2017080201.PNG" alt="抽离组件"></p>
<h2 id="分析各个组件担当的角色"><a href="#分析各个组件担当的角色" class="headerlink" title="分析各个组件担当的角色"></a>分析各个组件担当的角色</h2><ul>
<li>对于header和nav组件，这两个主要充当<code>导航</code>的角色，基本上是使用router-link实现路由跳转</li>
<li>对于tabs组件，主要进行路由解析、根据解析结果读取配置文件和将配置信息prop给子组件table，起一个<code>中转站和路由解析器</code>的作用</li>
<li>对于table组件，主要向用户<code>提供表格的各项功能操作</code>。由于多数界面的功能操作都类似，对于不同界面，只要切换功能操作的后台接口url就基本可以实现table各项功能逻辑的重用</li>
</ul>
<h2 id="确定组件的对外接口或核心部分"><a href="#确定组件的对外接口或核心部分" class="headerlink" title="确定组件的对外接口或核心部分"></a>确定组件的对外接口或核心部分</h2><ul>
<li>header和nav没有特别的对外接口</li>
<li>tabs也没有特别的对外接口，不过，它的核心是路由钩子里的<code>路由解析函数</code>，<br>&emsp;这个函数接受路由钩子里的to和from路由信息，以及tabs组件实例，作为函数参数。<br>&emsp;由于之前说过用路由路径去设计配置文件里的js对象，所以，函数里的路由解析基本是获取to路由信息的params，再利用params去配置文件找到对应信息对象，并传给table子组件。<br>&emsp;此外，该函数还可以处理错误的路径，大致实现：如果根据该路径获取不到配置信息，函数则强制跳转到某些路由下。</li>
<li>table组件可以再划分为几个小区域，如图：<br><img src="http://ou1hsqn5g.bkt.clouddn.com/2017080202.PNG" alt="table分区"></li>
</ul>
<p>每个区域对应相应的table组件的prop接口数据，注意接口数据的部分属性名直接对应element-ui组件的prop属性</p>
<p>table组件的<code>prop接口</code>分别是：<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div></pre></td><td class="code"><pre><div class="line">tabLabel:<span class="string">''</span>,//对应table所在的el-tab-pane的label</div><div class="line">active:<span class="literal">true</span>,//tabs父组件通过active指定当前table是否active，亦指table所在el-tab-pane是否active</div><div class="line"></div><div class="line">searchObj:&#123;</div><div class="line">  placeholder:<span class="string">''</span>,//搜索框的placeholder</div><div class="line">  label:<span class="string">''</span>,//搜索按钮上的文字</div><div class="line">  suburl:<span class="string">''</span>//搜索请求的子路径</div><div class="line">&#125;,</div><div class="line"></div><div class="line">pageObj:&#123;</div><div class="line">  suburl:<span class="string">''</span>,//向后台请求分页数据的子路径</div><div class="line">  sizes:[],//对应el-pagination组件的pageSizes属性</div><div class="line">&#125;,</div><div class="line"></div><div class="line">operateObj:&#123;</div><div class="line">  add:&#123;</div><div class="line">    label:<span class="string">'新建'</span>,//表格左下角的操作按钮上的文字</div><div class="line">    suburl:<span class="string">''</span>//操作对应的请求的子路径</div><div class="line">  &#125;,</div><div class="line">  upload:&#123;</div><div class="line">    label: <span class="string">'导入'</span>,//上传按钮的label</div><div class="line">    suburl: <span class="string">''</span>,//后台接口子路径</div><div class="line">    dialogTitle:<span class="string">'导入客户信息'</span>,//上传dialog的title</div><div class="line">    dialogTip:<span class="string">'客户类型、所属公司、联系人、联系电话、传真、地址、等级、备注'</span>,//上传dialog的文字tips</div><div class="line">  &#125;,</div><div class="line">  <span class="built_in">export</span>It:&#123;</div><div class="line">    label: <span class="string">'导出'</span>,</div><div class="line">    suburl: customerURL + <span class="string">'/exportExcel'</span>,</div><div class="line">  &#125;</div><div class="line">&#125;,</div><div class="line"></div><div class="line">tableObj:&#123;</div><div class="line">  heads:[//el-table的表头信息</div><div class="line">    &#123;</div><div class="line">      prop:<span class="string">''</span>,//对应el-table-column的prop,</div><div class="line">      label:<span class="string">''</span>,//对应el-table-column的label</div><div class="line">      sortable:<span class="literal">true</span>,//对应el-table-column的sortable</div><div class="line">      width:<span class="string">'20'</span>,//对应el-table-column的width</div><div class="line">    &#125;</div><div class="line">  ],</div><div class="line">  operate:&#123;</div><div class="line">    update:&#123;</div><div class="line">      label:<span class="string">'编辑'</span>,//表格每行的操作按钮的label</div><div class="line">      suburl:<span class="string">''</span>,//操作对应的后台接口子路径</div><div class="line">    &#125;,</div><div class="line">    deleteIt: &#123;</div><div class="line">      label: <span class="string">'删除'</span>,</div><div class="line">      suburl: <span class="string">''</span>,//后台接口子路径</div><div class="line">    &#125;</div><div class="line">  &#125;,</div><div class="line">&#125;,</div></pre></td></tr></table></figure></p>
<p>&emsp;table组件的功能操作挺多的，就不一一说了，这篇blog就单纯讲一下重构的大概思路吧。</p>
<p>&emsp;&emsp;写完了，第一次正式写blog，Enjoy!</p>
<p>&emsp;&emsp;由于项目原因，我主要放了我负责并重构的销售部分，一些关键文件也删了，大家就看看代码好了吧~</p>
<p>&emsp;&emsp;<a href="https://github.com/jessty/myTea" target="_blank" rel="external">重构部分的茶叶项目github</a></p>

    

    
</div>


                

                <!-- Post Comments -->
                
                    




                
            </div>

            <!-- Post Prev & Next Nav -->
            <nav class="material-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
    <!-- Prev Nav -->
    

    <!-- Section Spacer -->
    <div class="section-spacer"></div>

    <!-- Next Nav -->
    
        <a href="/2017/03/15/hello-world/" id="post_nav-older" class="next-content">
            旧篇
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
                <i class="material-icons">arrow_forward</i>
            </button>
        </a>
    
</nav>

        </div>
    </div>



                    
                        <!-- Overlay For Active Sidebar -->
<div class="sidebar-overlay"></div>

<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-colored sidebar-fixed-left" role="navigation">
    <div id="sidebar-main">
        <!-- Sidebar Header -->
        <div class="sidebar-header header-cover" style="background-image: url(/img/sidebar_header.png);">
    <!-- Top bar -->
    <div class="top-bar"></div>

    <!-- Sidebar toggle button -->
    <button type="button" class="sidebar-toggle mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style="display: initial;" data-upgraded=",MaterialButton,MaterialRipple">
        <i class="material-icons">clear_all</i>
        <span class="mdl-button__ripple-container">
            <span class="mdl-ripple">
            </span>
        </span>
    </button>

    <!-- Sidebar Avatar -->
    <div class="sidebar-image">
        <img src="/img/avatar.png" alt="Star's avatar">
    </div>

    <!-- Sidebar Email -->
    <a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
        jessty@foxmail.com
        <b class="caret"></b>
    </a>
</div>


        <!-- Sidebar Navigation  -->
        <ul class="nav sidebar-nav">
    <!-- User dropdown  -->
    <li class="dropdown">
        <ul id="settings-dropdown" class="dropdown-menu">
            
                <li>
                    <a href="#" target="_blank" title="Email Me">
                        
                            <i class="material-icons sidebar-material-icons sidebar-indent-left1pc-element">email</i>
                        
                        Email Me
                    </a>
                </li>
            
        </ul>
    </li>

    <!-- Homepage -->
    
        <li id="sidebar-first-li">
            <a href="/" target="_self">
                
                    <i class="material-icons sidebar-material-icons">home</i>
                
                主页
            </a>
        </li>
        
    

    <!-- Archives  -->
    
        <li class="dropdown">
            <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
                
                    <i class="material-icons sidebar-material-icons">inbox</i>
                
                    归档
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
            <li>
                <a class="sidebar_archives-link" href="/archives/2017/08/">八月 2017<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/03/">三月 2017<span class="sidebar_archives-count">1</span></a>
            </ul>
        </li>
        
    

    <!-- Categories  -->
    

    <!-- Pages  -->
    

    <!-- Article Number  -->
    
</ul>


        <!-- Sidebar Footer -->
        <!--
I'm glad you use this theme, the development is no so easy, I hope you can keep the copyright, I will thank you so much.
If you still want to delete the copyrights, could you still retain the first one? Which namely "Theme Material"
It will not impact the appearance and can give developers a lot of support :)

很高兴您使用并喜欢该主题，开发不易 十分谢谢与希望您可以保留一下版权声明。
如果您仍然想删除的话 能否只保留第一项呢？即 "Theme Material"
它不会影响美观并可以给开发者很大的支持和动力。 :)
-->

<!-- Sidebar Divider -->

    <div class="sidebar-divider"></div>


<!-- Theme Material -->

    <a href="https://github.com/viosey/hexo-theme-material"  class="sidebar-footer-text-a" target="_blank">
        <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
            主题 - Material
            <span class="sidebar-badge badge-circle">i</span>
        </div>
    </a>


<!-- Help & Support -->
<!--

-->

<!-- Feedback -->
<!--

-->

<!-- About Theme -->
<!--

-->

    </div>

    <!-- Sidebar Image -->
    

</aside>

                    

                    
                        <!-- Footer Top Button -->
                        <div class="toTop-wrap">
    <a href="#top" class="toTop">
        <i class="material-icons footer_top-i">expand_less</i>
    </a>
</div>

                    

                    <!--Footer-->
<footer class="mdl-mini-footer" id="bottom">
    
        <!-- Paradox Footer Left Section -->
        <div class="mdl-mini-footer--left-section sns-list">
    <!-- Twitter -->
    

    <!-- Facebook -->
    

    <!-- Google + -->
    
        <a href="https://www.google.com/" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(/img/footer/footer_ico-gplus.png);">
                <span class="visuallyhidden">Google Plus</span>
            </button><!--
     --></a>
    

    <!-- Weibo -->
    

    <!-- Instagram -->
    

    <!-- Tumblr -->
    

    <!-- Github -->
    
        <a href="https://github.com/jessty" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(/img/footer/footer_ico-github.png);">
                <span class="visuallyhidden">Github</span>
            </button><!--
     --></a>
    

    <!-- LinkedIn -->
    

    <!-- Zhihu -->
    
        <a href="https://www.zhihu.com/people/star-62-93/activities" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(/img/footer/footer_ico-zhihu.png);">
                <span class="visuallyhidden">Zhihu</span>
            </button><!--
     --></a>
    

    <!-- Bilibili -->
    

    <!-- Telegram -->
    
</div>


        <!--Copyright-->
        <div id="copyright">
            Copyright&nbsp;©&nbsp;
            <script type="text/javascript">
                var fd = new Date();
                document.write(fd.getFullYear());
            </script>
            &nbsp;Star~
        </div>

        <!-- Paradox Footer Right Section -->

        <!--
        I am glad you use this theme, the development is no so easy, I hope you can keep the copyright.
        It will not impact the appearance and can give developers a lot of support :)

        很高兴您使用该主题，开发不易，希望您可以保留一下版权声明。
        它不会影响美观并可以给开发者很大的支持。 :)
        -->

        <div class="mdl-mini-footer--right-section">
            <div>
                <div class="footer-develop-div">Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></div>
                <div class="footer-develop-div">Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></div>
            </div>
        </div>
    
</footer>


                    <!-- Import File -->
<script src="/js/lazyload.min.js"></script>
<script src="/js/js.min.js"></script>
<script src="/js/nprogress.js"></script>

<script type="text/javascript">
    NProgress.configure({
        showSpinner: true
    });
    NProgress.start();
    $('#nprogress .bar').css({
        'background': '#29d'
    });
    $('#nprogress .peg').css({
        'box-shadow': '0 0 10px #29d, 0 0 15px #29d'
    });
    $('#nprogress .spinner-icon').css({
        'border-top-color': '#29d',
        'border-left-color': '#29d'
    });
    setTimeout(function() {
        NProgress.done();
        $('.fade').removeClass('out');
    }, 800);
</script>



    <script src="/js/smoothscroll.js"></script>











<!-- Swiftye -->


<!-- Local Search-->


<!-- Window Load-->
<script>
    $(window).load(function() {
        // Post_Toc parent position fixed
        $('.post-toc-wrap').parent('.mdl-menu__container').css('position', 'fixed');
    });
</script>

<!-- MathJax Load-->


                </main>
            </div>
        </body>
    
</html>
